<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
		<title>Image Resizer</title>
		<link href="./css/imageResize.css" rel="stylesheet" type="text/css"/>
		<script src="./js/myScript.js" type="text/javascript"></script>
  </head>
  
  <body>
  <div id="showPage"><!--Creates a div element of all elements in showpage -->
		<div id="menu" class="menu">
		
		</div>
		
		<div id="content" class="content"> <!--Creates a div element that includes image resize form -->
			<h2>Resize Image</h2>	
			<!-- start of imageResizer form-->
		    <div id="imageResizeForm" class="imageResizeForm">        
               	<form action="resize" onsubmit="return validateForm()">
				<table>
                
                	<!-- Creates First row of the table-->
                	<tr>
                    	<td>Image FileName:</td><td align="center"> 
						<input type="text" id="imageFileName" name="imageFileName" size="50"/></td>
						<td><span id="imageFileNameAlert" class="error_hidden">
                         imageFileName cannot be null e.g. event07.jpg</span></td>
					</tr>
					<!--First row ends-->
					
					<!-- Creates Second row of the table-->
					<tr>
                    	<td>Width:</td><td align="center"> 
						<input type="text" id="width" name="width" size="50"/></td>
						<td><span id="widthAlert" class="error_hidden">
                         Plesae enter vaild width e.g. 200</span></td>
					</tr>
					<!--Second row ends-->
					
					<!-- Creates Third row of the table-->
					<tr>
                    	<td>Height:</td><td align="center"> 
						<input type="text" id="height" name="height" size="50"/></td>
						<td><span id="heightAlert" class="error_hidden">
                        Plesae enter vaild height e.g. 200</span></td>
					</tr>
					<!--Third row ends-->
                  
                    <!-- Creates submit button of the form-->
                    <tr>
                        <td></td>
						<td align="right"><input type="submit" name="submit" value="Generate Image"/></td>
                        <td></td>
				    </tr>
				   
                </table>
             </form>
    	     </div>
    	     
			 
		</div><!--end of content-->
		<div id="footer"></div>
  </div><!--end of showPage-->
  </body>
</html>
